<template>
    <div>
        <jsscom-heard />
        <div class="cons">
            <div class="pc-1 pu-con">
                <div class="pc-11">
                    <div
                        v-for="item in media_type"
                        :key="item.id"
                        @mouseover="mouseOver"
                        @mouseleave="mouseLeave"
                    >
                        <p>{{ item.name }}</p>
                        <div class="pc-122">
                            <h1>{{ item.name }}</h1>
                            <div>
                                <router-link
                                    :to="{path:'/gxzd/huwai',query:{ mediaName:item.name+'-'+itemCh.name }}"
                                    v-for="(itemCh,index) in item.children"
                                    :key="index"
                                    @click.native="onPageDec(item.name,itemCh.name )"
                                >{{ itemCh.name }}</router-link>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pc-12">
                    <div class="pc-121">
                        <el-carousel height="495px" indicator-position="none">
                            <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                                <router-link to>
                                    <img :src="prefixUrl+item.coverImageUrl" alt />
                                </router-link>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="pc-13">
                    <div class="pc-131">
                        <div v-if="!state">
                            <img src="../../../assets/g-1.png" alt />
                            <p>Hi,您好！</p>
                            <p>欢迎来到中国广告资讯网！</p>
                            <span>
                                <router-link to="/login">登录</router-link>
                                <router-link to>注册</router-link>
                            </span>
                        </div>
                        <div v-else>
                            <img src="../../../assets/g-1.png" alt />
                            <p>{{user.nickName||user.mobile}},您好！</p>
                            <p>欢迎来到中国广告资讯网！</p>
                            <span>
                                <router-link to="/personal">个人中心</router-link>
                                <router-link to @click.native="onSignOut">退出</router-link>
                            </span>
                        </div>
                    </div>
                    <div class="pc-132">
                        <router-link to="/gxzd/buy">
                            <img src="../../../assets/g-2.png" alt />
                        </router-link>
                        <router-link to="/gxzd/sell">
                            <img src="../../../assets/g-3.png" alt />
                        </router-link>
                    </div>
                </div>
            </div>
            <div style="height:30px"></div>
            <div class="pc-2 pu-20">
                <div class="pu-con">
                    <h1>— 商家推荐 —</h1>
                    <div class="pc-21" v-if="sjtjList.length>0">
                        <router-link
                            :to="{path:'/gxzd/huwai/dec',query:{data:JSON.stringify(item) }}"
                            v-for="item in sjtjList.slice(0,5)"
                            :key="item.id"
                        >
                            <img :src="prefixUrl+item.img1.split(',')[0]" />
                            <p>{{item.company||'暂无'}}</p>
                        </router-link>
                    </div>
                    <div class="pc-21" v-else>
                        <p>暂无数据</p>
                    </div>
                </div>
            </div>
            <div class="pc-3 pu-20">
                <div class="pu-con">
                    <h1>— 国家广告产业园 —</h1>
                    <div class="pc-21" v-if="ggtjList.length>0">
                        <router-link
                            :to="{path:'/gxzd/gglist/dec',query:{data:JSON.stringify(item) }}"
                            v-for="item in ggtjList.slice(0,5)"
                            :key="item.id"
                        >
                            <img :src="prefixUrl+item.img1" v-if="item.img1" />
                            <img src="../../../assets/g-9.png" v-else alt />
                            <p>{{item.title||'暂无'}}</p>
                        </router-link>
                    </div>
                    <div class="pc-21" v-else>
                        <p>暂无数据</p>
                    </div>
                </div>
            </div>
            <div style="height:20px"></div>
            <div class="pc-4 pu-con">
                <div class="pc-41">
                    <img src="../../../assets/g-5.png" alt />
                    <p>求购信息</p>
                </div>
                <div class="pc-42" v-if="newsList.length>0">
                    <router-link
                        :to="{path:'/gxzd/huwai/dec',query:{data:JSON.stringify(item) }}"
                        v-for="(item,index) in newsList.slice(0,8)"
                        :key="index"
                    >
                        <p>{{item.title}}</p>
                        <p>{{item.createTime | pattime}}</p>
                    </router-link>
                </div>
                <div class="pc-42" v-else>
                    <p>暂无数据</p>
                </div>
                <div class="pc-43"></div>
                <div class="pc-42" v-if="newsList.length>8">
                    <router-link
                        :to="{path:'/gxzd/huwai/dec',query:{data:JSON.stringify(item) }}"
                        v-for="(item,index) in newsList.slice(8,16)"
                        :key="index"
                    >
                        <p>{{item.title}}</p>
                        <p>{{item.createTime | pattime}}</p>
                    </router-link>
                </div>
                <div class="pc-42" v-else>
                    <p>暂无数据</p>
                </div>
            </div>
            <div style="height:25px"></div>
            <div class="pu-con pc-5">
                <router-link to>
                    <img src="../../../assets/g-10.png" alt />
                </router-link>
            </div>
        </div>
        <com-foot></com-foot>
    </div>
</template>

<script>
import jsscomHeard from '@/components/gxzd-heard'
import comFoot from '@/components/com-foot'
import media_type from '@/utils/media_type'
export default {
    components: {
        jsscomHeard,
        comFoot
    },
    filters: {
        pattime(value) {
            return value.slice(0, 10)
        }
    },
    data() {
        return {
            prefixUrl: '',
            navShow: false,
            user: {},
            media_type: media_type,
            bannerList: [],
            sjtjList: [],
            ggtjList: [],
            newsList: []

        }
    },
    created() {
        this.prefixUrl = this.$store.getters.imgUrl

        this.getGxzdImg() 	//首页广告图
        this.getToIndexListSj() //前台推荐--商家
        this.getToIndexListCy() //前台推荐--广告产业园
        this.getPageSupplyDemand() //我要买-列表

    },
    mounted() {

    },
    methods: {
        onPageDec(data1, data2) {
            console.log(data1)
            console.log(data2)
        },
        async getGxzdImg() {
            const data = { currentPage: 1, pageSize: 10 }
            const res = await this.$store.dispatch('access/getGxzdImg', data)
            this.bannerList = res.list
        },
        async getToIndexListSj() {
            const res = await this.$store.dispatch('access/getToIndexListSj')
			this.sjtjList = res
			console.log(res)
        },
        async getToIndexListCy() {
            const res = await this.$store.dispatch('access/getToIndexListCy')
            this.ggtjList = res
        },
        async getPageSupplyDemand() {
            const data = { type: 0, currentPage: 1, pageSize: 10 }
            const res = await this.$store.dispatch('access/getPageSupplyDemand', data)
            this.newsList = res.list
            console.log(this.newsList)
        },


        mouseOver() {
            this.navShow = true
        },
        mouseLeave() {
            this.navShow = false
        },
        uncultivated() {
            this.$message({
                message: '功能暂未开放，敬请期待',
                type: 'warning'
            });
        },
        onSignOut() {
            this.$store.dispatch('user/resetToken')
        }
    },
    computed: {
        state() {
            this.user = this.$store.getters.user
            return this.$store.getters.name
        }
    }
}
</script>

<style scoped>
@import "./home.css";
</style>
